<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day9</title>
    <style>
        body{
            background-color: rgb(238, 236, 236);
            margin: 0;
            padding: 0;
        }
        .nav{
            width: auto;
            height: auto;
            padding: 5px;
            padding-left: 50px;
            background-color: white;
        }
        .musicpr{
            text-align: center;
            height: 500px;
            
        }
        .musicprnav{
            height: 100px;
            display: grid;
            grid-template-columns: repeat(5,100px);
            grid-template-rows: 50px;
            justify-content: center;
            align-content: center;
        }

        .musiccont{
            display: grid;
            grid-template-columns: repeat(5,250px);
            grid-template-rows: 250px 50px ;
            justify-content: center;
            align-content: center;
        }
       
        .cont{
            background-color: rgb(201, 187, 148);
            margin: 5px;
        }

        .newmusic{
            text-align: center;
            background-color: rgba(226, 221, 221, 0.726);
        }
        .newmusicprnav{
            height: 100px;
            display: grid;
            grid-template-columns: repeat(6,100px);
            grid-template-rows: 50px;
            justify-content: center;
            align-content: center; 
        }
        .newmusiccont{
            display: grid;
            grid-template-columns: 80px 200px 80px 200px 80px 200px;
            grid-template-rows: repeat(3,100px);
            margin: 5px;
            justify-content: center;
            align-content: center; 
        }

        .newcont{
            width: 80px;
            height: 80px;
            background-color: turquoise;
        }
        
        .newmu  {
            text-align: left;
            padding-left: 5px;
        }

        .mv{
            text-align: center;
            
        }
        .mvnav{
            display: grid;
            grid-template-columns: repeat(6,100px);
            grid-template-rows: 50px;
            justify-content: center;
            align-content: center;
        }
        .mvcont{
            display: grid;
            grid-template-columns: repeat(5,200px);
            grid-template-rows: 100px 50px 100px 50px;
            justify-content: center;
            align-content: center;
        }
        .mvmv{
            width: 180px;
            height: 100px;
            background-color: yellowgreen;
        }
        .mvmv1{
            text-align: left;
        }
        .imgh{
            width: 240px;
            height: 240px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <h1>QQ音乐</h1>
    </div>

    <div class="musicpr">
        <h2>歌单推荐</h2>
        <div class="musicprnav" id=nav>
            
        </div>
        <div class="musiccont" id="mcont">
            <div class="cont"><img src="http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1" alt="" class="imgh"></div>
            <div class="cont"><img src="http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1" alt="" class="imgh"></div>
            <div class="cont"><img src="http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1"" alt="" class="imgh"></div>
            <div class="cont"><img src="http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1" alt="" class="imgh"></div>
            <div class="cont"><img src="http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1" alt="" class="imgh"></div>
        </div>
    </div>

    <div class="newmusic">
        <h2>新歌首发</h2>
        <div class="newmusicprnav">
            <div class="prnav">最新</div>
            <div class="prnav">内地</div>
            <div class="prnav">港台</div>
            <div class="prnav">欧美</div>
            <div class="prnav">韩国</div>
            <div class="prnav">日本</div>
        </div>
        <div class="newmusiccont">
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">Sabotage</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">如果人人爱音乐</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">你就不要想起我</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">软肋</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg" alt="" class="newcont"></div>
            <div class="newmu">一爱如故</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000hNAwr4dbutH_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">向宿命挥拳的人</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000000dcpok0A8RP3_2.jpg" alt="" class="newcont"></div>
            <div class="newmu">花好月圆</div>
            <div class="newcont"><img src="https://y.gtimg.cn/music/photo_new/T002R90x90M000004X1Kbg34UHQ5_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">Renegades</div>
            <div class="newcont"> <img src="https://y.gtimg.cn/music/photo_new/T002R90x90M0000018mpfj0lSvS0_1.jpg" alt="" class="newcont"></div>
            <div class="newmu">驯化者</div>
        </div>
    </div>
    <div class="mv">
        <h2>MV</h2>
        <div class="mvnav">
            <div class="prnav">精选</div>
            <div class="prnav">内地</div>
            <div class="prnav">港台</div>
            <div class="prnav">欧美</div>
            <div class="prnav">韩国</div>
            <div class="prnav">日本</div>
        </div>
        <div class="mvcont" id="list">
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg"" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg" alt=" " class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg" alt="" class="mvmv"></div>

            <div class="mvmv1">向宿命挥拳的人 (《新斗罗大陆》手游戴沐白角色曲)</div>
            <div class="mvmv1">雨</div>
            <div class="mvmv1">一爱如故 (《长歌行》电视剧插曲)</div>
            <div class="mvmv1">我很好骗</div>
            <div class="mvmv1">一爱如故 (《长歌行》电视剧插曲)</div>

            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003RlAau1dFne3.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M102003c3tSe1ehWwN.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M0000013X2t31kvJC4.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101003aYDEH2kWTX7.jpg" alt="" class="mvmv"></div>
            <div class="mvmv"><img src="https://y.gtimg.cn/music/photo_new/T015R640x360M101000xHMCS1g3sSW.jpg" alt="" class="mvmv"></div>

            <div class="mvmv1">造梦时学会飞行 (《声梦传奇》主题曲)</div>
            <div class="mvmv1">What's Wrong With Me (Punk Version)</div>
            <div class="mvmv1">Let's Party (《和平精英》2周年庆派对邀请曲)</div>
            <div class="mvmv1">鋼の羽根</div>
            <div class="mvmv1">에필로그 (epilogue)</div>
        </div>
    </div>
</body>
<script>
    
    function addprn(){
        var arr1=['为你推荐','运动','网络歌曲','思念','官方歌单'];
        var str="";
        var prn=document.getElementById('nav');
        for(i in arr1){
           str+='<div class="prnav">'+arr1[i]+'</div>';
        }
        console.log(str);
        prn.innerHTML=str;
    }
    addprn();
    console.log('---------------------------------------');

   
    function addmcont(){
        var arr2=['翻唱女神J.Fla | 只唱你最爱的旋律','古风女声控，优美旋律为你而来','想开一家早餐店，叫“早点见面','好评999+英文歌！轻松解压100％','书房背景乐 沉浸于字里行间的时光'];
        var str2='';
        var musiccont=document.getElementById('mcont');
        for(i in arr2){
            str2+='<div class="conttext">'+arr2[i]+'</div>';
        }
        console.log(str2);
        musiccont.innerHTML+=str2;
    }
    addmcont();

    function mvcont(){
        
        var arr7=['1','2','3'];
        for(i in arr7){
        var div1=document.createElement('div');
        var text=document.createTextNode(arr7[i]);
        div1.appendChild(text);
        }
        var list=document.getElementById('list');
        list.insertBefore(div1,list.childNodes[5]);
        
    }
</script>
</html>